<template>
  <div>
    <NavBar>
      <template v-slot:default>用户登录</template>
    </NavBar>
    <van-image src="https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png" width="250px" height="80px"
      style="margin-left:50px;margin-top: 80px"></van-image>
    <van-form @submit="onSubmit">
      <van-field v-model="email" name="邮箱" label="邮箱" placeholder="请输入你的邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"></van-field>
      <van-field v-model="password" name="密码" label="密码" placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"></van-field>
      <div style="color: #42b983;font-size: 14px;margin-left: 10px;margin-top: 10px"
        @click="$router.push({ path: '/register' })">没有账号,立即注册</div>
      <van-button type="primary" style="width:200px;margin-left: 90px;margin-top: 30px" round
        native-type="submit">登录</van-button>
    </van-form>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
import { Notify, Toast } from "vant";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: "login",
  setup() {
    const router = useRouter()
    const store = useStore()
    let form = reactive({
      email: '',
      password: '',
    })
    const { proxy } = getCurrentInstance()
    const onSubmit = () => {
      proxy.$API.user.login(form).then(res => {
        window.localStorage.setItem('token', res.access_token)
        store.commit('setUseInfo', true)
        form.password = ''
        setTimeout(() => {
          Toast.success('登录成功')
          router.push({
            path: '/home'
          }, 500)
        })
      })
    }
    return {
      onSubmit,
      ...toRefs(form)
    }
  }
}
</script>

<style scoped>
::v-deep .van-field {
  padding: 16px;
}
</style>

